// production-bom.js
const ProductionBomInfo = {
  template: `
    <div class="bom-container">
      <el-card>
        <div class="table-header">
          <!-- <span class="title">生产BOM清单</span> -->
          <!-- <div class="actions">
            <el-button
              type="primary"
              @click="refreshData"
            >刷新</el-button>
            <el-button
              type="success"
              @click="exportExcel"
            >导出Excel</el-button>
          </div> -->
        </div>

        <el-table
          :data="bomData"
          border
          stripe
          max-height="50vh"
          v-loading="loading"
          element-loading-text="数据加载中..."
        >
          <el-table-column
            prop="WPNAME"
            label="工序名称"
            width="120"
          />
          <el-table-column
            prop="WSNAME"
            label="工段名称"
            width="120"
          />
          <el-table-column
            prop="MATCODE"
            label="物料编码"
            width="100"
            align="center"
          />
          <el-table-column
            prop="MATNAME"
            label="物料名称"
            width=""
          />
          <el-table-column
            prop="BOMDOSAGE"
            label="单台用量"
            width="100"
            align="center"
          />
          <el-table-column
            prop="BOMAMOUNT"
            label="总用量"
            width="100"
            align="center"
          />
          <el-table-column
            prop="ZGJ_TEXT"
            label="部件跟踪"
            width="100"
            align="center"
          >
            <template #default="{ row }">
              <el-tag :type="row.DATA3 === '0' ? 'primary' : 'success'">
                {{ row.ZGJ_TEXT }}
              </el-tag>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="ROUTENO"
            label="工序顺序"
            width="100"
            align="center"
          /> -->
        </el-table>
      </el-card>
    </div>
  `,
  props: {
    workOrderId: {
      type: String,
      required: true
    },
    bomData: {
      type: Array,
      required: true,
      default: () => [],
      validator: (value) => {
        return true;
      }
    }
  },
  data () {
    return {
      loading: false
    };
  },
  methods: {
    refreshData () {
      this.$emit('refresh-bom', this.workOrderID);
    },
    exportExcel () {
      this.$emit('export-excel', this.bomData);
    }
  }
};

// 注册组件到全局
if (typeof window !== 'undefined' && window.Vue) {
  window.ProductionBomInfo = ProductionBomInfo;
}